<template>
  <div class="page-task">
    <div class="page-task-header">
      <pk-searchFrom :config="config" @onSearch="onSearch"></pk-searchFrom>
    </div>
    <div class="mt-12 mb-12 flex-row">
      <div><pk-button size="default" type="primary" :icon="Plus" @click="setisUser">添加</pk-button></div>
    </div>
    <div class="page-task-body">
      <pk-table :tableConfig="tableConfig" :data="tableData" :total="total" @onSize="onSize">
        <template #avatar="{row}">
          <img :src="avatar" :size="40" alt="" class="avatar">
        </template>
        <template #locked="{row}">
          <span v-if="row.locked == 0">正常</span>
          <span v-if="row.locked == 1">禁用</span>
        </template>
        <template #options="{row}">
         <div class="flex-row">
            <div class="mr-8"><pk-button @click="setEdit(row)">编辑</pk-button></div>
            <div class="mr-8"><pk-button @click="setPassword(row)">设置密码</pk-button></div>
            <div class="mr-8">
              <el-popconfirm
                  class="box-item"
                  title="确定要删除?"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  placement="top"
                  @confirm="setDel(row)"
                >
                  <template #reference>
                    <pk-button type="danger" >删除</pk-button>
                  </template>
                </el-popconfirm>
              </div>
          </div>
        </template>
      </pk-table>
    </div>
    <adduser-component @onClose="isUser=false" v-if="isUser" :curData="curData" @confirm="onConfirm"></adduser-component>
    <password-component @onClose="isPassword=false" v-if="isPassword" :curData="curData" @confirm="onConfirm"></password-component>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import pkSearchFrom from '@/components/pkui/pk-searchItem/pk-searchItem.vue'
import pkTable from '@/components/pkui/pk-table/pk-table.vue'
import pkButton from '@/components/pkui/pk-button/pk-button.vue'
import { Back, View, Plus } from '@element-plus/icons-vue'
import avatar from '@/assets/avatar.png'
import { useRouter } from 'vue-router'
import { accountPage, accountDel } from '@/api/api'
import adduserComponent from './adduser.vue'
import passwordComponent from './addpassword.vue'
import { getTime } from '@/utils/utils'
const router = useRouter()
const curData = ref({})
const isUser = ref(false)
const isPassword = ref(false)
const total = ref(0)
const formSearch = ref({})
const page = ref({
  pageNum: 1,
  pageSize: 10
})
const config = ref([
  {
    label: '姓名',
    type: 'input',
    prop: 'realname'
  },
  {
    label: '手机号码',
    type: 'input',
    prop: 'phone'
  },
  {
    label: '状态',
    type: 'select',
    prop: 'locked',
    options: [
      { label: '正常', value: 0 },
      { label: '禁用', value: 1 }
    ]
  }
])
const tableData = ref([])
const tableConfig = ref([
  {
    label: '序号',
    type: 'index'
  },
  // {
  //   label: '头像',
  //   type: 'slot',
  //   slotName: 'avatar'
  // },
  {
    label: '账号',
    prop: 'username',
    width: '160px'
  },
  {
    label: '姓名',
    prop: 'realname',
    width: '100px'
  },
  // {
  //   label: '性别',
  //   prop: 'sex'
  // },
  {
    label: '手机号码',
    prop: 'phone',
    width: '120px'
  },
  // {
  //   label: '邮箱',
  //   prop: 'email',
  //   width: '200px'
  // },
  {
    label: '状态',
    prop: 'locked',
    type: 'slot',
    slotName: 'locked'
  },
  {
    label: '创建时间',
    prop: 'creatorTime',
    width: '180px'
  },
  {
    label: '更新时间',
    prop: 'lastModifyTime',
    width: '170px'
  },
  {
    label: '操作',
    type: 'slot',
    slotName: 'options',
    fixed: 'right',
    width: '240px'
  }
])


const hanlderAdd = () => {
 
}

const HandlerBindView = () => {
 
}

const onConfirm = () => {
  isUser.value = false
  isPassword.value = false
  getList()
}

const setisUser = () => {
  curData.value = {}
  isUser.value = true
}
const setEdit = (e) => {
  curData.value = e
  isUser.value = true
}

const setPassword = (e) => {
  curData.value = e
  isPassword.value = true
}

const onSearch = (e) => {
  formSearch.value = e
  getList()
}

const onSize = (e) => {
  page.value = {
    pageNum: e.page,
    pageSize: e.pageSize
  }
  getList()
}

const getList = () => {
  accountPage({
    ...page.value,
    ...formSearch.value
  }).then(res => {
    total.value = res.resData.count
    tableData.value = res.resData.data.map(item => {
      return {
        ...item,
        creatorTime: getTime(item.creatorTime / 1000, 'time'),
        lastModifyTime: getTime(item.lastModifyTime / 1000, 'time')
      }
    })
  })
}

const setDel = (e) => {
  accountDel({
    id: e.id
  }).then(res => {
    getList()
  })
}

onMounted(() => {
  getList()
})

</script>

<style lang="scss" scoped>
.avatar{
  width: 40px;
}
</style>